<template>
    <div class="px-8">
        <com-filterTable
            :ref="pageConfig.key"
            class=""
            :services="pageConfig.serviceHandle"
            :filter-form-config="pageConfig.formConfig"
            :filterInline="false"
            :params="{}"
            :filterCol="4"
            filterLabelWidth="90px"
            :table-border="true"
            :showFormFilter="true"
            :showRequestNum="false"
            :top-operation="pageConfig.topOperation"
            :table-column="pageConfig.columnConfig"
            :queryDataHandle="queryDataHandle"
            :dataFormatHandle="dataFormatHandle"
            :autoLoad="true"
        />
        <com-formDialog
            ref="dialog"
            v-bind="dialogData"
            @changeOut="changeOut"
            @cancel="dialogCancelHandle"
            @submit="submitHandle"
        />
    </div>
</template>

<script>
import { selectPatientList, createPatient, updatePatient, deletePatient, addPatientVitalSigns } from "@/service/api.js";
import moment from "moment";
import { formFieldDoctor } from "@/utils/formFieldDoctor";

export default {
    name: "patientManage",
    data() {
        return {
            activeName: "filterTable",
            comDialogData:{},
            oldFormData: null,
            pageConfig: {
                key: "filterTable",
                serviceHandle: (data) => {
                    return selectPatientList(data);
                },
                params: {},
                formConfig: [
                    { key: "id", label: "患者编号" },
                    { key: "name", label: "患者姓名" },
                    { key: "medicalRecordNo", label: "就诊号" },
                    { key: "idCard", label: "身份证号" },
                ],
                columnConfig: [
                    { type: "select" },
                    { value: "medicalRecordNo", label: "就诊号" },
                    { value: "name", label: "患者姓名" },
                    {
                        value: "gender",
                        label: "性别",
                        formatter: (row) => {
                            return row.gender === 1 ? "男" : "女";
                        },
                    },
                    { value: "birthDate", label: "出生日期" },
                    { value: "idCard", label: "身份证号" },
                    { value: "phone", label: "联系电话" },
                    { value: "address", label: "地址" },
                    { value: "allergyHistory", label: "过敏史" },
                    {
                        value: "createTime",
                        label: "创建时间",
                        width: 180,
                        formatter: (row) => {
                            return moment(row.createTime).format(
                                "YYYY-MM-DD HH:mm:ss"
                            );
                        },
                    },
                    {
                        value: "action",
                        type: "render",
                        width: 200,
                        label: "操作",
                        render: (h, { data: { row } }) => {
                            const editBtn = (
                                <el-button type="text" on-click={() => this.addOrEditHandle(row)}>修改</el-button>
                            );
                            const delBtn = (
                                <el-button type="text" on-click={() => this.deleteList([row])}>删除</el-button>
                            );
                            const vitalSignsBtn = (
                                <el-button type="text" on-click={() => this.addVitalSigns(row)}>添加生命体征</el-button>
                            );

                            return [editBtn, vitalSignsBtn];
                        },
                    },
                ],
                topOperation: {
                    left: [
                        {
                            name: "新增",
                            key: "add",
                            type: "primary",
                            requireArguments: ["batchSelected", "filterForm"],
                            handle: (batchSelected) => {
                                this.addOrEditHandle();
                            },
                        },
                    ],
                },
            },
        };
    },
    computed: {
        dialogData() {
            let { comDialogData } = this;
            return {
                configs:
                    this[comDialogData.configName] || comDialogData.configs,
                ...comDialogData,
            };
        },
        formDialogConfig() {
            return [];
        },
    },
    methods: {
        changeOut({ key, formData } = {}) {
            this.oldFormData = { ...formData };
        },
        dataFormatHandle(data) {
            console.log(data, "dataFormatHandle");

            return {
                list: data.rows,
                total: data.total,
            };
        },
        queryDataHandle(params) {
            return params;
        },
        loadList() {
            let ref = this.$refs[this.activeName];
            if (Array.isArray(ref)) {
                ref = ref[0];
            }
            ref.filterFormQueryHandle();
        },
        dialogCancelHandle() {
            this.$refs.dialog.close();
        },
        async submitHandle(data) {
            let handle = this.dialogData.submitHandle;
            handle = typeof handle !== "function" ? this[handle] : handle;
            if (handle) {
                let loading = await this.$store.dispatch("global/loading");
                handle(data)
                    .then((res) => {
                        loading.close();
                        this.$refs.dialog.close();
                        this.loadList();
                    })
                    .catch((e) => {
                        console.log(e);
                        loading.close();
                    });
            }
        },
        addOrEditHandle(row) {
            this.comDialogData = {
                submitHandle: (data) => {
                    let handle = createPatient;
                    let params = { ...data };
                    if (row) {
                        handle = updatePatient;
                        params.id = row.id;
                    }
                    return handle(params);
                },
                initFormData: row,
                configs: [
                    { key: "medicalRecordNo", label: "就诊号", required: true },
                    { key: "name", label: "患者姓名", required: true },
                    {
                        key: "gender",
                        label: "性别",
                        required: true,
                        type: "select",
                        options: [
                            { label: "男", value: 1 },
                            { label: "女", value: 2 },
                        ],
                    },
                    { key: "birthDate", label: "出生日期", required: true , type: 'date'},
                    { key: "idCard", label: "身份证号", required: true },
                    { key: "phone", label: "联系电话", required: true },
                    { key: "address", label: "地址", fullLine: true },
                    { key: "allergyHistory", label: "过敏史",fullLine: true },
                ],
                activeRow: row,
                title: row ? "修改" : "新增",
                width: "750px",
                height: "350px",
                labelPosition: "left",
                labelWidth: "110px",
                col: 2,
            };
            this.$refs.dialog.show();
        },
        addVitalSigns(row) {
            this.comDialogData = {
                submitHandle: (data) => {
                    return addPatientVitalSigns({
                        ...data,
                        patientId: row.id,
                        // measureBy: this.staffId // TODO: Replace with actual user ID
                    });
                },
                configs: [
                    { key: "height", label: "身高(cm)", required: true },
                    { key: "weight", label: "体重(kg)", required: true },
                    { key: "temperature", label: "体温(℃)", required: true },
                    { key: "pulse", label: "脉搏(次/分)", required: true },
                    { key: "systolicPressure", label: "收缩压(mmHg)", required: true },
                    { key: "diastolicPressure", label: "舒张压(mmHg)", required: true },
                    // { key: "measureBy", label: "测量人", required: true },
                    formFieldDoctor.user.call(this, "测量人", "measureBy", { required: true }),
                    // { key: "measureTime", label: "测量时间", required: true },

                ],
                activeRow: row,
                title: "添加生命体征",
                width: "650px",
                height: "400px",
                labelPosition: "left",
                labelWidth: "150px",
                col: 1,
            };
            this.$refs.dialog.show();
        },
        deleteList(list) {
            let params = {
                id: list.map(item => item.id).join(',')
            };
            this.$confirm("确定要删除吗？").then(() => {
                this.comDialogData = {
                    submitHandle: () => {
                        return deletePatient(params);
                    }
                };
                this.submitHandle();
            });
        },
    },
};
</script>